<template>
  <div>
    <a-button-group>
      <a-button type="primary" @click="showModal">
        新建
      </a-button>
      <a-button type="default" @click="editMenu">
        编辑
      </a-button>
      <a-button type="default" @click="showConfirm">
        删除
      </a-button>
    </a-button-group>
    <br/>
    <br/>

    <a-table
        :columns="columns"
        :data-source="menus"
        rowKey="id"
        :pagination="false"
        :loading="loading"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
    />

    <a-modal v-model:visible="visible" title="新建" @ok="handleOk">
      <template >
        <a-button key="back" @click="handleCancel">
          取消
        </a-button>
        <a-button key="submit" type="primary" :loading="loading" @click="handleOk">
          保存
        </a-button>
      </template>
      <a-form :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">

        <a-form-item label="父级菜单">
          <a-tree-select
              v-model:value="form.parentId"
              style="width: 100%"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              :tree-data="menuTreeData"
              placeholder="Please select"
              tree-default-expand-all
          >
          </a-tree-select>
        </a-form-item>
        <a-form-item label="菜单编号">
          <a-input v-model:value="form.menuCode"/>
        </a-form-item>
        <a-form-item label="菜单名称">
          <a-input v-model:value="form.menuName"/>
        </a-form-item>
        <a-form-item label="图标">
          <a-input v-model:value="form.icon"/>
        </a-form-item>
        <a-form-item label="路由">
          <a-input v-model:value="form.url"/>
        </a-form-item>
        <a-form-item label="排序号">
          <a-input v-model:value="form.idx"/>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
import PmsApi from "@/components/login/js/PmsApi";
import {MenuApi} from "@/components/home/pms/menu/js/MenuApi";

const columns = [
  {
    title: '菜单编号',
    dataIndex: 'menuCode',
    key: 'id'
  },
  {
    title: '菜单名称',
    dataIndex: 'menuName',
    width: '12%',
    key: 'menuName'
  },
  {
    title: '图标',
    dataIndex: 'icon',
    key: 'icon'
  },
  {
    title: '排序号',
    dataIndex: 'idx',
    key: 'idx'
  },
  {
    title: '路由',
    dataIndex: 'url',
    width: '30%',
    key: 'url'
  },
];

const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    this.selectedRowKeys = selectedRowKeys;
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows);
  },
};

export default {
  data() {
    return {
      menus: [],
      menuTreeData: [],
      columns,
      rowSelection,
      selectedRowKeys: [],
      expandedRowKeys: [],
      loading: false,
      visible: false,
      labelCol: {span: 4},
      wrapperCol: {span: 20},
      form: {
        id: '',
        menuCode: '',
        menuName: undefined,
        url: undefined,
        icon: undefined,
        parentId: undefined,
        idx: '',
      }
    };
  },
  created() {
    this.loadMenuTable();
    this.loadMenuTree();
  },
  methods: {
    loadMenuTree() {
      PmsApi.loadMenuTree().then(res => {
        this.menuTreeData = res;
      })
    },
    loadMenuTable() {
      this.loading = true;
      PmsApi.treeList().then(res => {
        this.cleanChildren(res);
        this.menus = res;
        this.loading = false;
      })
    },
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    /**
     * 清楚children属性
     * @param arr
     */
    cleanChildren(arr) {
      for (let i in arr) {
        const item = arr[i];
        if (item.children && item.children.length === 0) {
          delete item.children;
        } else {
          this.cleanChildren(item.children)
        }
      }
    },
    deleteMenu() {
      this.delete({data: this.selectedRowKeys}).then(() => {
        this.selectedRowKeys = [];
        this.$message.success("已删除");
        this.loadMenuTable();
      }, message => {
        this.$message.warning(message);
      })

    },
    isSelectOne() {
      if (this.selectedRowKeys && this.selectedRowKeys.length === 1) {
        return true;
      }
      return false;
    },
    editMenu() {
      if (!this.isSelectOne()) {
        this.$message.warning('请选择并且只能选择一条数据');
        return;
      }
      this.get(this.selectedRowKeys[0]).then(res => {
        this.form = res;
        this.showModal()
      });
    },
    showModal() {
      this.visible = true;
    },
    handleOk() {
      this.loading = true;
      this.save(this.form).then(() => {
        this.visible = false;
        this.loading = false;
        this.loadMenuTable();
      })

    }
    ,
    handleCancel() {
      this.visible = false;
    }
    ,
    onSubmit() {
      console.log('submit!', this.form);
    }
    ,
    showConfirm() {
      const that = this;
      if (this.selectedRowKeys.length === 0) {
        that.$message.warning('请选择一条数据');
        return;
      }
      this.$confirm({
        title: '确定删除吗?',
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          that.deleteMenu();
        },
        onCancel() {
        },
      });
    }
    ,
  },
  mixins: [MenuApi],
};
</script>
